
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title><spring:message code="dashboard.title"/></title>
	
	<tags:script source="../js/jquery/jquery-1.6.2.js" />
	<tags:script source="../js/jquery/ui/jquery-ui-1.8.16.min.js" />	
	<tags:script source="../js/jquery/jquery.form.js" />
	<tags:script source="../js/jquery/jquery.validate.js" />
	<tags:script source="../js/jquery/jquery.qtip.js" />
	<tags:script source="../js/jquery/jquery.tablesorter.js" />	
	<tags:script source="../js/main.js" />
	
	<tags:style source="../css/jquery/ui/jquery-ui-1.8.16.css" />
	<tags:style source="../css/jquery/jquery.qtip.css" />
	<tags:style source="../css/main.css" />
	
	<script>	
		$(document).ready(function(){
			$('.links li a').click(function(){
				var url = $(this).attr('url');
				if(url == 'showPageHeading.do'){
					url = url + "?heading="+$(this).text().replace(/\s/g, '+');
				}
				loadDiv('content', url);
				$('.links li a').removeClass('active');
				$(this).addClass('active');
			});
			
			$('.link-heading').click(function(){
				$(this).next().slideToggle('normal');
				$(this).find('span.ui-icon').toggleClass('ui-icon-triangle-1-s');
			});
			
			$('#changePasswordLink').click(function(){
				loadDiv('content', $(this).attr('url'));
			});
		});
	</script>
	
</head>
<body>

<div id="main">
<div id="header">
	<div class="logo">
		<img width="114" height="98" alt="CIPE logo" src="../images/cipelogo.gif"></img>
        <span class="name"><img src="../images/name.gif"></img></span>
    </div>
    <div class="name"><spring:message code="baner.title"/></div>
</div>
<div id="nav-bar">
	<ul>
    	<li><a href="javascript:void(0);"><spring:message code="dashboard.tabs.cipe.home"/></a></li>
        <li><a href="javascript:void(0);" id="crmsHomeLink" class="active"><spring:message code="dashboard.tabs.crms.home"/></a></li>
        <li><a href="javascript:void(0);" id="changePasswordLink" url='showChangePassword.do'><spring:message code="dashboard.tabs.changePassword"/></a></li>
        <li><a href="../logout.do"><spring:message code="dashboard.tabs.logout"/></a></li>
    </ul>    
</div>
<div id="main-inner">
    <div id="left">
    	<div id="username">${user.fullName}</div>   	
       	<c:forEach items="${linkCategories}" var="linkCategory" varStatus="status">
       		<div class="links-main"> 
       			<c:set var="class" value="" />
       			<c:set var="display" value="none" />
       			<c:if test="${status.first }">
       				<c:set var="class" value="ui-icon-triangle-1-s" />
       				<c:set var="display" value="block" />
       			</c:if>    			
        		<div class="link-heading">
        			<span class="ui-icon ui-icon-triangle-1-e" style="float: left;"></span>
        			<span style="position: relative;top: 2px;">${linkCategory.name}</span>
        		</div>
	            <div class="links" style="display: ${display};">
	            	<ul>
	            		<c:forEach items="${linkCategory.links}" var="link">
	            			<li><a href="javascript://" url='${link.url}'>${link.name}</a></li>
	            		</c:forEach>
	            	</ul>
	            </div>
	           </div>
       	</c:forEach>
    </div>
    <div id="content">
		<div id="content-inner">
        	<div class="content-heading">Welcome Admin. CIPE1</div>
            <div id="CMRS-text">CIPE Management and Reporting System, text goes here</div>
            <div id="announcement">This is the welcome message for the user, can be used for Announcements</div>          
        </div>        
    </div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
